<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
     <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<script type="text/javascript" src="js/PIE_IE678.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="css/H-ui.css"/>
<link type="text/css" rel="stylesheet" href="css/H-ui.admin.css"/>
<link type="text/css" rel="stylesheet" href="font/font-awesome.min.css"/>
<!--[if IE 7]>
<link href="font/font-awesome-ie7.min.css" rel="stylesheet" type="text/css" />
<![endif]-->

<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/* //先设置xmlhttprequest的全局变量
var xmlhttp = null;
function creatxmlhttp(){
//根据浏览器版本创建xmlhttp
if (window.XMLHttpRequest)
{// code for Firefox, Opera, IE7, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp==null){
	alert("xml创建失败");
}
} */

function SelectRoomAjax(Obj){
	/* creatxmlhttp(); */
		
	  var roomType = $("select[name=roomType]").val(); 
	  var liveintime = $("input[name=liveintime]").val(); 
	  var outtime = $("input[name=outtime]").val(); 
//使用的是jquery
	//obj是指input这个文本，调用obj.value才能获得输入的文本框的信息
	 $("select[name=roomId]").empty();   
		
//清空  
        $.ajax({
        url:'./SelectRoomAjaxServlet',  
        type:"post", 
        data:{ 
        	roomType : roomType,
        	liveintime : liveintime,
        	outtime : outtime
        	
        	 /* "roomType="+roomType+"&liveintime="+liveintime+"&outtime="+outtime, */
        },
        cache: false,  
        error:function(){  
        },   
        success:function(data){  
         
        
        	//将json数据转换成对象
        	//alert(data);//data的值输出为【1，3，4】类型的，但是它是json格式的数据所以在each遍历语句中要把它转换成
        	//JSON.parse(data)是将json格式再转换成javaScript对象
        	//alert(JSON.stringify(data));
        	var option = '';
           $.each(JSON.parse(data),function(n,value){  //jquery语句 function (index, value)中index是当前元素的位置，value是值。
       //遍历之后将option付给id为select的select标签
               $("#Select").append("<option value='"+value+"'>"+value+"</option>");
                    })
      
        }  
    });  
	 //将参数发送出去
}

</script>
<nav class="Hui-breadcrumb"><i class="icon-home"></i> 首页 <span class="c-gray en">&gt;</span> 管理员管理 <span class="c-gray en">&gt;</span> 管理员列表 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="icon-refresh"></i></a></nav>
<div class="pd-20">
  <div class="text-c">
    <form class="Huiform" method="post" action="./LiveInServlet" target="_self">
      <input type="text" placeholder="身份证号" autocomplete="off" value="" name="card" class="input-text">
      <input type="text" placeholder="姓名" autocomplete="off" value="" name="name" class="input-text">
      <input type="text" placeholder="联系方式" autocomplete="off" value=""name="telphone"  class="input-text"><br>
       <br>
       性别：<select class="select" name="sex" size="1">
        <option value="0">男</option>
        <option value="1">女 </option>
       </select>
      房间类型：<select class="select" name="roomType" size="1" >
        <option value="标准间">标准间</option>
        <option value="单人间">单人间</option>
        <option value="双人间">双人间</option>
        <option value="大床间">大床间</option>
       </select> 
     
       <br>
      入住时间： <input type="date"  name="liveintime" value="" placeholder="现在"/><br>
      <br>
      退房时间： <input type="date"   name ="outtime" value="" onblur="SelectRoomAjax(this)"/><br>
      <br>
      <input type="submit" class="btn btn-success" value="添加"><!-- <i class="icon-plus"> </i> 添加</button>  -->
     
     
        房间号：<select class="select"  id="Select" name="roomId">  
      
       </select>  <br>
        <!-- <button type="button" class="btn btn-success" id="" name="" onClick="admin_add(this);"> -->
    </form>
  </div>
  <div class="cl pd-5 bg-1 bk-gray mt-20">
    <!-- <span class="l"> -->
     <form action="LiveInSelectServlet" class="btn btn-danger radius" method="post">
    <button type="submit" class="btn btn-danger radius" id="" name=""><i class="icon-trash"></i> 刷新客人信息</button>
    </form>
    
    

    
    
    <!-- <a href="javascript:;" onClick="delect()" class="btn btn-danger radius"> --><i class="icon-trash"></i>
    <span class="r">共有数据：<strong>54</strong> 条</span>
  </div>
  <table class="table table-border table-bordered table-bg">
    <thead>
      <tr>
        <th scope="col" colspan="7">客人信息列表</th>
      </tr>
      <tr class="text-c">
        <th width="25"><input type="checkbox" name="" value=""></th>
        <th width="40">ID</th>
        <th width="150">身份证号码</th>
        <th>姓名</th>
        <th width="130">入住时间</th>
        <th width="100">退房时间</th>
        <th width="70">房间号</th>
      </tr>
    </thead>
    <tbody>
    <c:if test="${liveinlist!=null&&liveinlist.size()>0}">
     <c:forEach items="${liveinlist}" var="single">
      <tr class="text-c">
        <td><input type="checkbox" value="1" name=""></td>
        <td>${single.id}</td>
        <td>${single.card}</td>
        <td>${single.name}</td>
        <td>${single.liveintime}</td>
        <td class="admin-status"><span class="label label-success">${single.outtime}</span></td>
         <td>${single.roomInfo}</td>
      </tr>
      </c:forEach>
      </c:if>
    </tbody>
  </table>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pagenav.cn.js"></script> 
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script>

</body>

</body>
</html>